<template>
	<view class="content ">
		<view class="row f-column a-center p-top100 p-bot50" v-if="realname.card">
			<image src="../../static/imgs/renz2.png" mode="aspectFit" class="renzImg"></image>
			<text class="white size32 m-top10">已实名认证</text>
		</view>
		<block v-else>
			<view class="viewbox auto p-top50">
				<view class="rows white size32">实名认证即可创建区块链地址</view>
				<view class="rows color_aa size26 m-top20">已注册手机号：{{phone}}</view>
			</view>
			<view class="rows padding20">
				<view class="row xinfin padding20 bor_radius_10">
					<view class="rows color_aa size26">1、按照中国法律法规要求，请提供真实有效的身份认证信息。</view>
					<view class="rows color_a14 size26">2、填写的身份认证信息，必须与注册手机号身份备案信息一致，否则无法通过认证。</view>
				</view>
			</view>
		</block>


		<view class="listItem">
			<view class="topic flexBox">
				<view class="line"></view>
				<view class="label">{{realname.card?'':'填写'}}实名认证信息</view>
			</view>
			<view class="iptBox">
				<text class="label">姓名</text>
				<input v-model="name" type="text" :disabled="realname.name != ''" placeholder="请输入姓名" class="ipt"
					placeholder-class="iptP" />
			</view>
			<view class="iptBox">
				<text class="label">身份证号</text>
				<input v-model="card" type="text" :disabled="realname.card != ''" placeholder="请输入本人身份证号" class="ipt"
					placeholder-class="iptP" />
			</view>
		</view>


		<view class="subBtn" @tap="submit()" v-if="!realname.card">提交审核</view>
		<view class="row j-centert a-center m-top20" v-if="!realname.card">
			<image src="../../static/imgs/renz1.png" mode="aspectFit" class="renz0img"></image>
			<text class="color_aa size26">安全保障中，信息仅用于身份确认</text>
		</view>
		<!-- <view class="tips">
			*温馨提示：需要同时提交三个收款信息
		</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				wxImg: '../../static/img/my/upload.png',
				alipayImg: "../../static/img/my/upload.png",
				name: '',
				card: '',
				card_front_image: '',
				card_back_image: '',
				phone: '',
			};
		},
		onLoad(e) {},
		onShow() {

			if (this.realname.name) {
				this.name = this.realname.name.replace(this.realname.name.substring(0, 1), '*');
			}
			if (this.realname.card) {
				this.card = this.realname.card.replace(this.realname.card.substring(3, 15), '**************')
			};

			let phone = uni.getStorageSync('phone');
			if (phone) {
				this.phone = phone.replace(phone.substring(3, 7), '****');
			}

		},
		methods: {
			submit() {


				if (!this.name) return this.toast("请输入姓名");
				if (!this.name) return this.toast("请输入本人身份证号");

				let data = {
					name: this.name,
					card: this.card
				}
				this.$http.post('user/auth', data).then(res => {
					if (res.code != 1) return this.toast(res.msg ? res.msg : '信息输入有误,认证失败!');
					this.toast(res.msg)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
			},
			chooseImg() {
				if (this.realname.card) return;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					success: (res) => {
						let tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: this.baseUrl + 'upload/fileUpload',
							filePath: tempFilePaths[0],
							name: 'image',
							header: {
								'token': uni.getStorageSync("token")
							},
							success: (res1) => {
								var result = JSON.parse(res1.data);
								if (result.code == 1) {
									this.alipayImg = result.data.path;
									this.card_back_image = result.data.path;
								} else {
									this.toast('上传失败');
								}
							}
						});
					}
				});
			},
			chooseImg1() {
				if (this.realname.card) return;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					success: (res) => {
						let tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: this.baseUrl + 'upload/fileUpload',
							filePath: tempFilePaths[0],
							name: 'image',
							header: {
								'token': uni.getStorageSync("token")
							},
							success: (res1) => {
								var result = JSON.parse(res1.data);
								if (result.code == 1) {
									this.wxImg = result.data.path;
									this.card_front_image = result.data.path;
								} else {
									this.toast('上传失败');
								}
							}
						});
					}
				})
			}
		},

		computed: {
			...mapState(['realname']),
		},



	}
</script>
<style>
	page {
		background-color: #23272C;
	}
</style>
<style lang="scss" scoped>
	.renzImg {
		width: 100rpx;
		height: 100rpx;
	}

	.xinfin {
		background-color: #383B3F;
	}

	.color_a14 {
		color: #a14c4b;
	}

	.renz0img {
		width: 40rpx;
		height: 40rpx;
	}

	.content {
		.listItem1 {
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			color: #AAAAAA;
			font-size: 24rpx;
		}

		.listItem {
			background-color: #23272C;
			padding: 0 30rpx;
			margin-bottom: 20rpx;

			.topic {
				height: 88rpx;
				color: #FFFFFF;
				font-size: 32rpx;

				.line {
					width: 8rpx;
					height: 28rpx;
					background-color: #EAB855;
					border-radius: 4rpx;
					margin-right: 16rpx;
				}
			}

			.chooseImg {
				padding: 30rpx 0;
			}
		}

		.iptBox1 {
			width: 330rpx;
			height: 220rpx;
			color: #AAAAAA;
			font-size: 28rpx;
			background-color: #383B3F;

			.headIcon {
				width: 140rpx;
				height: 140rpx;
			}
		}

		.iptBox {
			display: flex;
			align-items: center;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 2rpx solid #383B3F;

			.ipt {
				flex: 1;
				font-size: 30rpx;
				color: #AAAAAA;
				font-weight: 500;
			}

			.iptP {
				color: #AAAAAA;
				font-size: 30rpx;
				font-weight: 500;
			}

			.label {
				width: 23%;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.tips {
			color: #AAAAAA;
			text-align: center;
			font-size: 24rpx;
			font-weight: 400;
		}

		.subBtn {
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			margin: 150rpx auto 30rpx;
			background: #EAB855;
			box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(234, 184, 85, 0.1);
		}

	}
</style>
